﻿@model BrnMall.Web.StoreAdmin.Models.ProductPriceListModel

@section header{
    <title>按日期设置价格</title>
    <link type="text/css" rel="stylesheet" href="/admin_store/css/site.css" />
    <link rel="stylesheet" href="/components/dataprice/css/calendar-price-jquery.min.css">
    <link type="text/css" rel="stylesheet" href="/components/jbox/Skins/Default/jbox.css" />
    <script type="text/javascript" src="/admin_store/scripts/jquery.js"></script>
    <script type="text/javascript" src="/components/jbox/jquery.jBox-2.3.min.js"></script>
    <script src="/components/dataprice/js/calendar-price-jquery.min.js"></script>
    <style>
        .calendar-table-wrapper table .week th {text-align:center;}
        .calendar-table-wrapper table td b { margin-right:5px;}
        .capricorncd-date-detailed-settings .cddsw-container .cddsw-batch-settings .bs-content .bs-lable {flex:0 0 65px;margin-right:30px;}
        .capricorncd-date-detailed-settings .cddsw-container .cddsw-batch-settings .bs-week-chekbox .bs-options-wrapper label {flex:initial;width:60px;}
        .calendar-foot-wrapper button.btn-cancel {display:none;}
        .capricorncd-calendar-container .calendar-foot-wrapper button.btn-reset { border-radius:3px; padding-left:10px; padding-right:10px; width:90px}
      .capricorncd-calendar-container .calendar-foot-wrapper button.btn-confirm, .capricorncd-date-detailed-settings .cddsw-foot-wrapper button.btn-confirm{border-radius:3px; padding-left:10px; padding-right:10px; width:90px}

      .capricorncd-date-detailed-settings .cddsw-container .cddsw-batch-settings .bs-days-select .bs-options-wrapper .day-option {
    display: block;
    margin: 0 2px 2px 0;
    font-style: normal;
    float: left;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid #ddd;
}
.capricorncd-date-detailed-settings .cddsw-container .cddsw-batch-settings .bs-days-select .bs-options-wrapper .day-option._active {
    border-color: #098cc2;
    color: #fff;
    background-color: #098cc2;
}
.capricorncd-date-detailed-settings .cddsw-container .cddsw-batch-settings .bs-days-select .bs-options-wrapper .day-option._disabled {
    border-color: #eee;
    color: #fff;
    background-color: #eee;
    cursor: not-allowed;
}

    </style>
}
@section body{
<h1 class="rightH1">
	微信小程序 &gt; 商品管理 &gt; <span class="rightH1-cur">按日期设置价格</span>
    <div class="right">
        <a class="menuBT" style="cursor:pointer" onclick="goBack()">
            <img src="/admin_store/images/goback.jpg" />返回列表
        </a>
        <div class="clear">
        </div>
    </div>
    <div class="clear">
    </div>
</h1>

<div class="container" style="margin-top:10px; margin-left:15px;margin-right:15px;"></div>
   @using (Html.BeginForm("EditProductPrice", "product", FormMethod.Post, new { @id = "productform" }))
   {
    <input type="hidden" name="pid" value="@Model.Pid" />
    <input type="hidden" name="starttime" value="@DateTime.Now.ToString("yyyyMMdd")" />
    <input type="hidden" name="endtime" value="@DateTime.Now.AddDays(90).ToString("yyyyMMdd")" />
        <div class="form-box">
            @foreach (var item in Model.PriceList)
            {
                <input type="hidden" name="date" value="@item.AppointDay" />
                <input type="hidden" name="price" value="@item.Price" />
            }

        </div>
   }

    <div style="margin:10px;">说明：可以设置未来90天的价格，例如：设置2018年1月1日的房间预订价格为：298元，则1月1日会自动以298元预订。
    <br />适合人群：适合酒店预订、车票预订等价格有波动的需求的商户。
    </div>
 <script>
     var arrPrice = []; //选中的价格数组
     @{
         var sbPrice = new StringBuilder();
         foreach (var item in Model.PriceList)
         {
             sbPrice.AppendFormat("arrPrice.push({{'priceid':'{0}','date':'{1}','price':'{2}'}});\r\n", item.PriceId, item.AppointDay, item.Price);
         }
        }
     @Html.Raw(sbPrice.ToString());
</script>
<script>
    $(function () {
        loadDate(arrPrice, function (data) { submits(data) });
    });

    //提交事件
    function submits(data) {
        var html = "";
        var isCheck = true;
        for (var i = 0; i < data.length; i++) {
            var item = data[i];
            if (item.price == '') {
                //需要删除的ID
                html += "<input type='hidden' name='deleteId' value='" + item.priceid + "' />";
            } else {
                if (isNaN(item.price))
                {
                    isCheck = false;
                    $.jBox.tip('价格必须是数字');
                    break;
                }
                //添加或更新的价格
                html += "<input type='hidden' name='date' value='" + item.date + "' />";
                html += "<input type='hidden' name='price' value='" + item.price + "' />";
            }
        }

        if (!isCheck) return;
  
        $(".form-box").html("");
        $(".form-box").html(html);
        if (data.length > 0)
            $("#endtime").val(data[data.length - 1]);   //截止日期
        $('#productform').submit();
    }

  
  function loadDate(array,submitCallback) {
      var mockData = [];      //日期数组

      for (var i = 0; i < array.length; i++) {
          var item = array[i];
          var temp = item.date;
          item.date = temp.substring(0, 4) + "-" + temp.substring(4, 6) + "-" + temp.substring(6, 8);   //日期格式化
      }
      if (array != null) mockData = array;
    
      $.CalendarPrice({
          el: '.container',
          //startDate: '2018-02-05', 27
          endDate: '@DateTime.Now.AddDays(90).ToString("yyyy-MM-dd")',
          data: mockData,
          // 配置需要设置的字段名称
          config: [
            ////{
            ////    key: 'buyNumMax',
            ////    name: '最多购买数'
            ////},
            //{
            //    key: 'buyNumMin',
            //    name: '最少购买数'
            //},
            {
                key: 'price',
                name: '当天价格'
            }           
          ],
          // 配置在日历中要显示的字段
          show: [
            {
                key: 'price',
                name: '当日价:￥'
            }
            //,
            //{
            //    key: 'priceSettlement',
            //    name: '采:￥'
            //},
            //{
            //    key: 'stock',
            //    name: '库:'
            //}
          ],
          callback: function (data) {
              console.log('callback ....');
              console.log(data)
              submitCallback(data);
          },
          cancel: function () {
              console.log('取消设置 ....');
              // 这里可以触发关闭设置窗口
          },
          reset: function () {
              var list = this.data;
              $.jBox.confirm("您确定要清空价格吗？", "提示！", function (v, h, f) {
                  if (v == "ok") {                   
                      for (var i = 0; i < list.length; i++) {
                          list[i].price = '';
                      }
                      $(".data-hook").find("p").html("");
                      console.log('数据重置成功！');
                  }
              });            
          },
          error: function (err) {
              alert(err.msg);
          },
          // 自定义颜色
          style: {
              // 头部背景色
              headerBgColor: '#098cc2',
              // 头部文字颜色
              headerTextColor: '#fff',
              // 周一至周日背景色，及文字颜色
              weekBgColor: '#098cc2',
              weekTextColor: '#fff',
              // 周末背景色，及文字颜色
              weekendBgColor: '#098cc2',
              weekendTextColor: '#fff',
              // 有效日期颜色
              validDateTextColor: '#333',
              validDateBgColor: '#fff',
              validDateBorderColor: '#eee',
              // Hover
              validDateHoverBgColor: '#098cc2',
              validDateHoverTextColor: '#fff',
              // 无效日期颜色
              invalidDateTextColor: '#ccc',
              invalidDateBgColor: '#fff',
              invalidDateBorderColor: '#eee',
              // 底部背景颜色
              footerBgColor: '#fff',
              // 重置按钮颜色
              resetBtnBgColor: '#ff8427',
              resetBtnTextColor: '#fff',
              resetBtnHoverBgColor: '#ff8427',
              resetBtnHoverTextColor: '#fff',
              // 确定按钮
              confirmBtnBgColor: '#ff8427',
              confirmBtnTextColor: '#fff',
              confirmBtnHoverBgColor: '#ff8427',
              confirmBtnHoverTextColor: '#fff',
              // 取消按钮
              cancelBtnBgColor: '#ff8427',
              cancelBtnBorderColor: '#ff8427',
              cancelBtnTextColor: '#fff',
              cancelBtnHoverBgColor: '#ff8427',
              cancelBtnHoverBorderColor: '#ff8427',
              cancelBtnHoverTextColor: '#fff'
          }
          // 点击有效的某一触发的回调函数
          // 注意：配置了此参数，设置窗口无效，即不能针对日期做参数设置
          // 返回每天的数据
          //        everyday: function (dayData) {
          //            console.log('点击某日，返回当天的数据');
          //            console.log(dayData);
          //        },
          // 隐藏底部按钮（重置、确定、取消），前台使用该插件时，则需要隐藏底部按钮
          //        hideFooterButton: true
      });
      $(".bs-content").eq(0).css("display", "none");    //隐藏按时间段的设置
  }

  function randNum(max) {
    return Math.round(Math.random() * max);
  }

  function fd(n) {
    n = n.toString();
    return n[1] ? n : '0' + n;
  }

  //返回列表
  function goBack() {
      var url = getQueryString("url");
      if (url == null || url == '')
          url = 'onsaleproductlist'
      window.location.href = url;
  }

  /*获取URL参数值*/
  function getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = decodeURI(window.location.search).substr(1).match(reg);
      if (r != null)
          return unescape(r[2]);
      return null;
  }
</script>

}
